<template>
  <view class="home">
    <view class="nav-link u-flex-y-center u-flex-between" v-if="type == 1">
      <text>优惠券链接：{{couponData.transfer_code}}</text>
      <image src="@/static/images/01_13fg.png" mode=""></image>
    </view>
    <view class="ewm-box">
      <view class="ewm-title">优惠券二维码</view>
      <image :src="couponData.qrcode" mode=""></image>
    </view>
    <view class="coupon-content">
      <view class="coupon-price">￥{{couponData.coupon_price}}</view>
      <view class="coupon-desc">代金券</view>
      <view class="coupon-name u-flex-xy-center">
        <text>{{couponData.coupon_title}}</text>
        <up-tag :text="status_text" v-if="type != 1" class="u-m-l-10" size="mini" type="warning"></up-tag>
      </view>
      <view class="ewm-gap"></view>
      <view class="coupon-text u-flex-y-center">
        <view>适用房源：</view>
        <view>{{couponData.coupon.xiaoqu}}</view>
      </view>
      <view class="coupon-text  u-flex-y-center">
        <view>
          有效期至：</view>
        <view>{{couponData.start_use_time_text}}-{{couponData.end_use_time_text}}
        </view>
      </view>
      <view class="u-flex-y-center u-flex-items-start coupon-text">
        <view>使用规则：</view>
        <view>
          <view>本券可以与其他优惠共享;</view>
          <view class="u-m-t-10"> 优惠券全部用户使用，无门槛可用;</view>
          <view class="u-m-t-10"> 优惠券支持分享转赠</view>
        </view>
      </view>
    </view>
  </view>
  <back-page />
  <view class="share-btn" v-if="type != 1" @click="$u.route(`/pages/index/couponShare?type=1&id=${couponData.id}`)">
    分享给朋友
  </view>
</template>

<script setup>
  import {
    computed,
    onMounted,
    ref
  } from 'vue';
  import { couponDetail } from '../../config/api';
  const props = defineProps({
    type: {
      type: String,
      default: 1
    },
    id: {
      type: [String, Number],
      default: ''
    }
  })
  if (props.type != 1) {
    uni.setNavigationBarTitle({
      title: '优惠券详情'
    })
  }
  const status_text = computed(() => {
    switch (+couponData.value.status) {
      case 0:
        return '未使用'
      case 1:
        return '已使用'
      case 2:
        return '已过期'
      default:
        return '未使用'
    }
  })
  const couponData = ref({
    coupon: {}
  })
  onMounted(() => {
    _couponDetail()
  })
  // 优惠券详情
  const _couponDetail = () => {
    couponDetail({ id: props.id }).then(res => {
      console.log(res)
      couponData.value = res.data
    })
  }
</script>

<style scoped lang="scss">
  .home {
    padding: 0 20rpx;
    min-height: 100vh;
    background: #f7f6fa
  }

  .nav-link {
    background: #fff;
    border-radius: 20rpx;
    color: #000;
    font-size: 28rpx;
    padding: 24rpx;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .ewm-box {
    border-radius: 20rpx;
    padding: 24rpx;
    background: #fff;
    text-align: center;
    margin-top: 20rpx;

    .ewm-title {
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
    }

    image {
      width: 262rpx;
      height: 262rpx;
      margin: auto;
      margin-top: 30rpx;
    }
  }

  .coupon-content {
    padding: 20rpx 40rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    background: #fff;


    .coupon-price {
      font-size: 36rpx;
      font-weight: 500;
      color: #df0f0f;
      text-align: center;
    }

    .coupon-desc {
      font-size: 26rpx;
      color: #333;
      margin-top: 16rpx;
      text-align: center;
    }

    .coupon-name {
      color: #F87610;
      font-size: 32rpx;
      font-weight: 800;
      margin-top: 24rpx;
      text-align: center;
    }

    .ewm-gap {
      height: 4rpx;
      background-color: #F87610;
      width: 100%;
      margin: 36rpx 0;
    }

    .coupon-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #666;
      margin-top: 16rpx;

      view+view {
        color: #000;
      }
    }
  }

  .share-btn {
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    font-size: 30rpx;
    bottom: env(safe-area-inset-bottom);
  }
</style>